<template>
    <!--博客列表页面-->
    <div>
        <Header></Header>
        <div class="block">
            <el-timeline>
                <el-timeline-item :timestamp="blog.created" placement="top" v-for="(blog,index) in blogs" :key="index">
                    <el-card>
                        <h4>
                            <router-link :to="{name:'BlogDetail',params:{blogId:blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h4>
                        <p>{{blog.description}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>


            <el-pagination class="page"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @current-change="page">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "Blogs",
        components:{Header},
        data(){
            return{
                blogs:{},
                currentPage:1,
                total:0,
                pageSize:5
            }
        },
        methods:{
            page(currentPage){
                const _this=this
                _this.$axios.get("/blogs?page="+currentPage).then(res =>{
                    console.log(res)
                    _this.blogs=res.data.data.records
                    _this.currentPage = res.data.data.pages
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size
                })
            }
        },
        created() {
            this.page(1)
        }
    }
</script>

<style scoped>
    .page{
        margin: 0 auto;
        text-align: center;
    }
</style>